<!--
Created by IntelliJ IDEA.
User: iulianacosmina
Date: 2022-12-26
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

  <head th:replace="~{templates/layout :: pageTitle('List Singers Page')}"></head>

  <body>
      <div class="container">
        <header th:replace="~{templates/layout :: pageHeader}" ></header>

        <header th:replace="~{templates/layout :: pageMenu}" ></header>

        <section th:fragment="~{templates/layout :: pageContent}">
          <div class="card border-success mb-3" style="max-width: 40rem;">
          <div class="card-header" th:text="#{singers.list.title}"/>
          <div class="card-body">
              <div class="search bs-component">
                <a th:href="@{/singers/search}"
                   th:text="#{command.search} + ' '+ #{singers.list.title}"
                   class="btn btn-outline-dark">SINGERS SEARCH</a>
                <a th:href="@{/singers/create}"
                   th:text="#{command.create} + ' '+ #{singer.new}"
                   class="btn btn-outline-danger">SINGER CREATE</a>
              </div>
              <br/>
              <table th:if="${not #lists.isEmpty(singers)}" class="table table-hover">
                <thead>
                <tr>
                  <th th:text="#{label.Singer.count}" class="table-success">COUNT</th>
                  <th th:text="#{label.Singer.firstname}" class="table-success">FIRSTNAME</th>
                  <th th:text="#{label.Singer.lastname}" class="table-success">LASTNAME</th>
                </tr>
                </thead>
                <tbody>
                    <tr th:each="singer : ${singers}" >
                      <td><a th:href="@{/singer/} + ${singer.id}" th:text="${singer.id}">ID</a></td>
                      <td th:text="${singer.firstName}">...</td>
                      <td th:text="${singer.lastName}">...</td>
                    </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        <footer th:replace="~{templates/layout :: pageFooter}" ></footer>
      </div>
  </body>
</html>
